<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
    :topHeight="'10vh'"
    :dialogWidth="'70%'"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="班型信息" name="first">
        <div class="classformarea">
          <el-form
            ref="classForm"
            :model="formData"
            :label-position="'right'"
            :rules="rules"
            size="medium"
            label-width="98px"
          >
            <el-row>
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="班型名称" prop="title">
                      <el-input
                        v-model="formData.title"
                        placeholder="请输入班型名称"
                        clearable
                        :style="{ width: '97%' }"
                      ></el-input>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="申领类型" prop="apply_type">
                      <el-select
                        v-model="formData.apply_type"
                        placeholder="请选择申领类型"
                        clearable
                        collapse-tags
                        multiple
                        :style="{ width: '97%' }"
                        @change="apply_typeAll"
                      >
                        <el-option
                          :label="apply_typeAlltext"
                          value="0"
                        ></el-option>
                        <el-option
                          v-for="(item, index) in gettypeOptions"
                          :key="index"
                          :label="item.title"
                          :value="item.id"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="班型图片"
                    prop="head_img"
                    style="width: 100%"
                  >
                    <uploadimg
                      @uploadimgok="head_imgok"
                      @deleteimg="head_imgdel"
                      :imgModel="formData.head_img"
                      class="uploaditem"
                    >
                      <span slot="text">上传的图片大小不得超过10M</span>
                    </uploadimg>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="margin_fu">
                <el-col :span="8">
                  <el-form-item label="副标题" prop="sub_title">
                    <el-input
                      v-model="formData.sub_title"
                      placeholder="请输入班型副标题"
                      clearable
                      :style="{ width: '97%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="班型标签" prop="tab">
                    <el-input
                      v-model="formData.tab"
                      placeholder="2-3个汉字，如推荐、巨划算等"
                      clearable
                      :style="{ width: '97%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!--     <el-col :span="8">
                  <el-row>
                    <el-form-item label="关联机构" prop="team_id">
                      <treeselect v-model="formData.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
                        placeholder="请选择关联机构" />
                      <el-select
                        v-model="formData.school_id"
                        placeholder="请选择关联校区"
                        clearable
                        :style="{ width: '97%' }"
                        @change="checkAll($event)"
                        collapse-tags
                        multiple
                      >
                        <el-option :label="slesecAlltext" value="0"></el-option>
                        <el-option
                          v-for="(item, index) in selectschoolOptions"
                          :key="index"
                          :label="item.title"
                          :value="item.id"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                </el-col> -->
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="学车时间" prop="study_time">
                      <el-select
                        v-model="formData.study_time"
                        placeholder="请选择学车时间"
                        clearable
                        :style="{ width: '97%' }"
                      >
                        <el-option
                          v-for="(item, index) in cartimeOptions"
                          :key="index"
                          :label="item.title"
                          :value="item.id"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="接送方式" prop="pick_type">
                    <el-select
                      v-model="formData.pick_type"
                      placeholder="请选择接送方式"
                      clearable
                      :style="{ width: '97%' }"
                    >
                      <el-option
                        v-for="(item, index) in picktypeOptions"
                        :key="index"
                        :label="item.title"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="班型费用" prop="cost">
                      <el-input
                        v-model="formData.cost"
                        placeholder="请输入班型费用"
                        clearable
                        :style="{ width: '97%' }"
                        @input="costinput"
                      >
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="班型原价" prop="price">
                      <el-input
                        v-model="formData.price"
                        placeholder="请输入班型原价"
                        clearable
                        :style="{ width: '97%' }"
                        @blur="priceinput"
                      >
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="付款方式" prop="pay_type">
                      <el-select
                        v-model="formData.pay_type"
                        placeholder="请选择付款方式"
                        clearable
                        :style="{ width: '97%' }"
                        @change="changepaytype"
                      >
                        <el-option
                          v-for="(item, index) in paytypeOptions"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                </el-col>
              </el-row>
              <!-- 节点表单 -->
              <nodetable
                ref="nodeform"
                :isonlyone="isstages"
                v-if="isshownode && isshowDialog"
                @sendData="sendData"
                :detailData="nDatas"
                :isedit="isnodeEdit"
                :nodeprice="nodeprice"
              ></nodetable>
              <el-row v-if="isshownode">
                <span class="tiptext">
                  说明：1、次数/学时默认为0，9999表示不限；2、节点费用表示收费达到对应金额可以有相应权限。
                </span>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="科二人数" prop="section_two">
                      <el-input
                        v-model="formData.section_two"
                        placeholder="请输入科二人数"
                        clearable
                        :style="{ width: '97%' }"
                      >
                        <template slot="append">人</template>
                      </el-input>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-form-item label="科三人数" prop="section_three">
                      <el-input
                        v-model="formData.section_three"
                        placeholder="请输入科三人数"
                        clearable
                        :style="{ width: '97%' }"
                      >
                        <template slot="append">人</template>
                      </el-input>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="课程类别" prop="type">
                    <el-select
                      v-model="formData.type"
                      placeholder="请选择课程类别"
                      clearable
                      :style="{ width: '97%' }"
                    >
                      <el-option
                        v-for="(item, index) in typeOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="免费重学" prop="free_again">
                      <el-radio-group
                        v-model="formData.free_again"
                        size="medium"
                      >
                        <el-radio
                          v-for="(item, index) in free_againOption"
                          :key="index"
                          :label="item.id"
                          :disabled="item.disabled"
                        >
                          {{ item.title }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="驾考无忧险" prop="worry_free_jk">
                      <el-radio-group
                        v-model="formData.worry_free_jk"
                        size="medium"
                      >
                        <el-radio
                          v-for="(item, index) in free_againOption"
                          :key="index"
                          :label="item.id"
                        >
                          {{ item.title }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="模拟无忧险" prop="worry_free_mn">
                      <el-radio-group
                        v-model="formData.worry_free_mn"
                        size="medium"
                      >
                        <el-radio
                          v-for="(item, index) in free_againOption"
                          :key="index"
                          :label="item.id"
                        >
                          {{ item.title }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-row>
              <el-row>
                  <el-col :span="8">
                    <el-form-item label="限时班型" prop="due_timeShow">
                      <el-radio-group
                        v-model="formData.due_timeShow"
                        size="medium"
                      >
                        <el-radio
                          v-for="(item, index) in free_againOption"
                          :key="index"
                          :label="item.id"
                        >
                          {{ item.title }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                <el-col :span="8" v-if="formData.due_timeShow">
                  <el-form-item label="过期时间" prop="due_time">
                    <el-date-picker
                      v-model="formData.due_time"
                      placeholder="请选择过期时间"
                      format="yyyy-MM-dd HH:mm"
                        type="daterange"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :style="{ width: '97%' }"
                      :default-time="['00:00:00', '23:59:59']"
                      clearable
                    >
                    
                    </el-date-picker>
                  </el-form-item>
                </el-col>
               
              </el-row>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="班型介绍" name="second">
        <div class="bxjsinfo">
          <detailform
            ref="descriptionref"
            :detailtitle="'套餐介绍'"
            class="bxitem"
            v-if="isshowDialog"
            @sendData="sendDatadesc"
            :detailData="descData"
          ></detailform>
          <detailform
            ref="costref"
            :detailtitle="'费用明细'"
            class="bxitem"
            v-if="isshowDialog"
            :detailData="costData"
            @sendData="sendDatacost"
          ></detailform>
          <detailform
            ref="serviceref"
            :detailtitle="'服务承诺'"
            class="bxitem"
            v-if="isshowDialog"
            :detailData="serData"
            @sendData="sendDataser"
          ></detailform>
        </div>
      </el-tab-pane>
    </el-tabs>
  </commonformdialog>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
//获取本地数据
import { getSessionStorage } from '@/utils/accessToken'
//api
import { createItem, readData, updateData } from '@/api/course'
//选择付款方式table
import nodetable from './nodeform'
//班型详情表单
import detailform from './detailform'
import Treeselect from '@riophae/vue-treeselect' //下拉树组件
import { parse } from 'qs'
export default {
  data() {
    return {
      //是否为分期
      isstages: false,
      //输入全款的时候 自动录入表格
      nodeprice: '',
      //申领类型全选
      apply_typeAlltext: '选择所有类型',
      //申领类型是否选中了全选
      isapply_type: false,
      //新增还是编辑 显示 节点表格
      isnodeEdit: 0,
      //节点数据
      nDatas: [],
      //tabs切换
      activeName: 'first',
      //是否显示表格
      isshownode: false,
      slesecAlltext: '选择所有校区',
      //是否选中了全选
      isSelectAll: false,
      //上传0-8张图片是否显示后面的说明
      isshowtext: true,
      //上传8张图片
      formData: {
        type: '',
        title: '',
        apply_type: [],
        head_img: '',
        sub_title: '',
        tab: '',
        team_id: null,
        study_time: '',
        cost: '',
        price: '',
        pay_type: '',
        pick_type: '',
        section_two: '',
        section_three: '',
        free_again: '',
        worry_free_jk: 0,
        worry_free_mn: 0,
        due_timeShow:0,
        due_time:'',
        //付款方式数据
        node: [],
        details: [],
      },
      //descData
      descData: [],
      //费用data
      costData: [],
      //服务承诺
      serData: [],
      rules: {
        type: [
          {
            required: true,
            message: '请选择课程类别',
            trigger: 'blur',
          },
        ],
       
        title: [
          {
            required: true,
            message: '请输入班型名称',
            trigger: 'blur',
          },
        ],
        apply_type: [
          {
            required: true,
            message: '请选择申领类型',
            trigger: 'change',
          },
        ],
        head_img: [],
        cost: [
          {
            required: true,
            message: '请输入班型费用',
            trigger: 'blur',
          },
        ],
        price: [
          {
            required: true,
            message: '请输入班型原价',
            trigger: 'blur',
          },
        ],
        pay_type: [
          {
            required: true,
            message: '请选择付款方式',
            trigger: 'change',
          },
        ],
        sub_title: [
          {
            required: true,
            message: '请输入班型副标题',
            trigger: 'blur',
          },
        ],
        tab: [
          {
            required: false,
            message: '班型标签：2-3个字符',
            trigger: 'blur',
          },
          {
            pattern: /^[a-zA-Z0-9]{1,3}$|^([\u4e00-\u9fa5]|[a-zA-Z0-9]){2,3}$/,
            message: '请输入2-3个字符',
            trigger: 'blur',
          },
        ],
        pick_type: [
          {
            required: true,
            message: '请选择接送方式',
            trigger: 'change',
          },
        ],
        section_two: [
          {
            required: true,
            message: '请输入科目二人数',
            trigger: 'blur',
          },
        ],
        section_three: [
          {
            required: true,
            message: '请输入科目三人数',
            trigger: 'blur',
          },
        ],
        free_again: [
          {
            required: true,
            message: '请选择是否重学',
            trigger: 'blur',
          },
        ],
        study_time: [
          {
            required: true,
            message: '请选择学车时间',
            trigger: 'blur',
          },
        ],
        worry_free_jk: [
          {
            required: true,
            message: '请选择驾考无忧险',
            trigger: 'blur',
          },
        ],
        worry_free_mn: [
          {
            required: true,
            message: '请选择模拟无忧险',
            trigger: 'blur',
          },
        ],
       due_time:[],
         due_timeShow: [
          {
            required: true,
            message: '请选择是否开启到期时间',
            trigger: 'blur',
          },
        ],
      },
      paytypeOptions: [
        {
          label: '全款',
          value: 1,
        },
        {
          label: '分期',
          value: 2,
        },
      ],
      typeOptions: [
        {
          label: '陪练/复训班',
          value: 1,
        },
        {
          label: '预报名班',
          value: 2,
        },
        {
          label: '常规班',
          value: 3,
        },
      ],
      free_againOption: [
        {
          title: '是',
          id: 1,
        },
        {
          title: '否',
          id: 0,
        },
      ],
      gettypeOptions: [],
      selectschoolOptions: [],
      cartimeOptions: [],
      picktypeOptions: [],
      treeOptions: [],
    }
  },
  components: {
    commonformdialog,
    uploadimg,
    nodetable,
    detailform,
    Treeselect,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      }
    },
    //监听价格的变化
    priceinput(val) {
      if (this.formData.price < parseInt(this.nodeprice)) {
        this.$message({
          message: '班型原价不能小于班型价格！',
          type: 'error',
        })
        this.formData.price = ''
      }
    },
    //输入班型金额的时候自动填入数据
    costinput(val) {
      this.nodeprice = val
    },
    //申领类型 全选事件
    apply_typeAll(val) {
      //选中的length
      let len = this.formData.apply_type.length
      //选择的id
      let selectId = val[len - 1]
      //如果等于0 说明选中了全部
      //判断值是否为空的时候
      if (len < 1) {
        this.apply_typeAlltext = '选择所有类型'
        this.isapply_type = false
      }
      if (selectId == 0) {
        let allValues = this.gettypeOptions.map((item) => {
          return item.id
        })
        if (!this.isapply_type) {
          this.formData.apply_type = allValues
          this.apply_typeAlltext = '取消所有类型'
          this.isapply_type = !this.isapply_type
        } else {
          this.formData.apply_type = []
          this.apply_typeAlltext = '选择所有类型'
          this.isapply_type = !this.isapply_type
        }
      }
    },
    //sendDatadesc 获取套餐详情数据
    sendDatadesc(data) {
      this.formData.details[0] = data
    },
    //获取费用明细数据
    sendDatacost(data) {
      // this.formData
      this.formData.details[1] = data
    },
    //获取服务承诺
    sendDataser(data) {
      this.formData.details[2] = data
    },
    //获取子组件中的表单数据
    sendData(data) {
      //获取子组件中填写表单的数据
      this.formData.node = data
    },
    //获取子组件中的数据
    getData() {},
    //tab切换
    handleClick(tab, event) {},
    //付款方式选项
    changepaytype(val) {
      if (!val) {
        this.isshownode = false
        return
      }
      this.isshownode = true
      if (val == 1) {
        //全款
        //把价格传值给 节点表格
        this.nodeprice = this.formData.cost
        this.isnodeEdit = 0
        this.isstages = false
      } else {
        //分期
        this.isnodeEdit = 1
        this.isstages = true
      }
    },
    //如果关联分校选择 checkAll == 1 那么久全选 否则就不全选
    checkAll(val) {
      //选中的length
      let len = this.formData.school_id.length
      //选择的id
      let selectId = val[len - 1]
      //如果等于0 说明选中了全部
      //判断值是否为空的时候
      if (len < 1) {
        this.slesecAlltext = '选择所有校区'
        this.isSelectAll = false
      }
      if (selectId == 0) {
        let allValues = this.selectschoolOptions.map((item) => {
          return item.id
        })
        if (!this.isSelectAll) {
          this.formData.school_id = allValues
          this.slesecAlltext = '取消所有校区'
          this.isSelectAll = !this.isSelectAll
        } else {
          this.formData.school_id = []
          this.slesecAlltext = '选择所有校区'
          this.isSelectAll = !this.isSelectAll
        }
      }
    },
    //删除图片
    head_imgdel(index) {
      this.formData.head_img = ''
    },

    //上传详情图片
    imgDetailok(imgurl) {
      // this.classforms.details.push(imgurl)
    },
    //上传8张图片
    head_imgok(imgurl) {
      // this.formData.head_img.push(imgurl)
      this.formData.head_img = imgurl
    },
    //关闭弹窗
    closeDialog() {
      //隐藏表格
      this.isshownode = false
      this.slesecAlltext = '选择所有校区'
      this.isSelectAll = false
      this.activeName = 'first'
      //清空表单
      this.nDatas = []
      this.descData = []
      this.costData = []
      this.serData = []
      this.$refs['classForm'].resetFields()
      this.$emit('closedialog')
    },
    //点击确认提交表单
    confirmbtn() {
      this.$refs['classForm'].validate(async (valid) => {
        if (!valid) return
        //获取节点数据
        this.$refs.nodeform.getData()
        //获取套餐介绍
        this.$refs.descriptionref.getData()
        //费用明细
        this.$refs.costref.getData()
        //服务承诺 serviceref
        this.$refs.serviceref.getData()
        let {
          title,
          apply_type,
          head_img,
          team_id,
          study_time,
          cost,
          price,
          pay_type,
          pick_type,
          section_two,
          section_three,
          free_again,
          //付款方式数据
          node,
          details,
          sub_title,
          tab,
          id,
          type,
          worry_free_jk,
          worry_free_mn,
          due_time,
        } = this.formData
        let params = {
          title,
          apply_type,
          head_img,
          team_id,
          study_time,
          cost,
          price,
          pay_type,
          pick_type,
          section_two,
          section_three,
          free_again,
          //付款方式数据
          node,
          details,
          sub_title,
          tab,
          type,
          due_time,
        }
        if (worry_free_jk == 1 && worry_free_mn == 1) {
          params.worry_free = 3
        } else if (worry_free_jk == 0 && worry_free_mn == 0) {
          params.worry_free = 0
        } else {
          // params.worry_free=worry_free_jk==1?1:0+','+worry_free_mn==1?2:0
          if (worry_free_jk == 1 && worry_free_mn == 0) {
            params.worry_free = 1
          }
          if (worry_free_jk == 0 && worry_free_mn == 1) {
            params.worry_free = 2
          }
        }

        params.apply_type = apply_type.join(',')
        if (this.formType == 0) {
          let data = await createItem(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '添加成功!',
            })
            this.activeName = 'first'
            //关闭弹窗
            this.$refs['classForm'].resetFields()
            this.$emit('confirm')
          }
        } else {
          params.id = id
          // params.details = JSON.parse(this.formData.details)
          let data = await updateData(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '编辑成功!',
            })
            this.activeName = 'first'
            //关闭弹窗
            this.$refs['classForm'].resetFields()
            this.$emit('confirm')
          }
        }
      })
    },
  },
  mounted() {
    //申领类型
    this.gettypeOptions = getSessionStorage('Options')[1]
    //设置校区
    this.selectschoolOptions = getSessionStorage('Optionsall')['school']
    //设置学车时间
    this.cartimeOptions = getSessionStorage('Options')[3]
    //接送方式
    this.picktypeOptions = getSessionStorage('Options')[6]
    this.treeOptions = getSessionStorage('Optionsall').team

    this.$bus.on('editformclasstype', async (val) => {
      let data = await readData({ id: val.id })
      // this.classforms = data.data
      let detaiArr = JSON.parse(data.data.data.details)
      this.descData = detaiArr[0]
      this.costData = detaiArr[1]
      this.serData = detaiArr[2]
      this.slesecAlltext = '取消所有校区'
      this.isSelectAll = true
      let formData = data.data.data
      console.log(formData, '---------')
      formData.apply_type = data.data.data.apply_type.value
      formData.study_time = data.data.data.study_time.value
      formData.pick_type = data.data.data.pick_type.value
      formData.type = data.data.data.type
      if(formData.due_time.length>0){
        formData.due_timeShow=1
      }else{
         formData.due_timeShow=0
      }
      this.nDatas = data.data.node
      formData.details = JSON.parse(data.data.data.details)

      if (!formData.worry_free || formData.worry_free == 0) {
        formData.worry_free_jk = 0
        formData.worry_free_mn = 0
      } else if (formData.worry_free == 3) {
        formData.worry_free_jk = 3
        formData.worry_free_mn = 3
      } else {
        if (formData.worry_free == 1) {
          formData.worry_free_jk = 1
          formData.worry_free_mn = 0
        } else {
          formData.worry_free_jk = 0
          formData.worry_free_mn = 1
        }
      }

      this.formData = JSON.parse(JSON.stringify(formData))
      if (data.data.data.pay_type == 1) {
        //全款
        this.isnodeEdit = 0
        this.isstages = false
      } else {
        //分期
        this.isnodeEdit = 1
        this.isstages = true
      }
    })
  },
  watch: {
    formType: function (val) {
      if (val == 1) {
        this.isshownode = true
      }
    },
    'formData.due_timeShow'(val){
        if(val==1){
          this.rules.due_time=  [
          {
            required: true,
            message: '请选择到期时间',
            trigger: 'blur',
          },
        ]
        }else{
          this.rules.due_time= []
          this.formData.due_time= []
        }
    }
  },
  destroyed() {
    this.$bus.off('editformclasstype')
  },
}
</script>

<style scoped lang='scss'>
.imgDetail {
  width: 100%;
  min-height: 116px;
  max-height: 400px;
  overflow-y: scroll;
  background: #fff;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 12px 16px 8px;
  box-sizing: border-box;
  .imgDetail-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 14px;
      line-height: 24px;
      color: #666;
    }
  }
}
.uploaditem {
  position: absolute;
  left: 0;
  top: 0;
}

.tablearea {
  margin-bottom: 20px;
}
::v-deep {
  .uploadimg {
    width: 100%;
    .el-form-item__content {
      width: 100%;
    }
  }
  .el-tabs__header {
    position: absolute;
    width: calc(100% - 40px);
    z-index: 999;
    // height: 60px;
    box-sizing: border-box;
    top: 55px;
    padding: 18px 0 0 0;
    background-color: #ffffff;
    box-shadow: 0 8px 28px 0 rgba(192, 206, 226, 0.13);
  }
  .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .el-tabs__item.is-active {
    font-weight: bold;
  }
  .el-form-item__label {
    position: relative;
    right: 5px;
  }
  .el-form {
    padding-right: 0px !important;
  }

  .el-dialog__body {
    // overflow: hidden;
    // height: 550px !important;
    max-height: calc(70vh - 124px);
    overflow: auto;
  }
  .el-input-group__append {
    color: #999 !important;
  }
}
.tiptext {
  font-size: 12px;
  color: red;
  float: right;
  margin: 15px 0;
}
.bxitem {
  margin-bottom: 20px;
}
.classformarea {
  margin-top: 80px;
}
.bxjsinfo {
  margin-top: 60px;
  width: 100%;
}
</style>
